<template>
  <div class="page-3-container">
    <div class="top-left--wrap">
      <img class="en-name-pic" :src="enNamePic" />
      <img class="name-pic" :src="namePic" />
      <img class="line-pic" :src="linePic" />
    </div>
    <div class="top-right--wrap">
      <img class="square-bg" :src="squareBg" />
    </div>
    <div class="bottom-right--wrap">
      <img class="square-bg" :src="squareBg" />
    </div>
    <div class="letf--wrap">
      <img class="square-bg" :src="leftPic" />
    </div>
    <div class="content">
      <img :src="contentPic" />
    </div>
    <div class="heart-wrap">
      <div class="first-floor">
        <img :src="pic_1" />
        <img :src="pic_2" />
      </div>
      <div class="second-floor">
        <img :src="pic_3" />
        <img class="offset" :src="pic_4" />
        <img class="offset" :src="pic_5" />
        <img :src="pic_6" />
      </div>
      <div class="third-floor">
        <img :src="pic_7" />
        <img :src="pic_8" />
        <img :src="pic_9" />
      </div>
      <div class="last-floor">
        <img :src="pic_10" />
      </div>
    </div>
  </div>
</template>

<script setup>
  import squareBg from '../assets/image/square_bg.png'
  import namePic from '../assets/image/page_3/name.png'
  import linePic from '../assets/image/page_3/line.png'
  import enNamePic from '../assets/image/page_3/en_name.png'
  import leftPic from '../assets/image/page_3/left_pic.png'
  import contentPic from '../assets/image/page_3/content.png'
  import pic_1 from '../assets/image/page_3/pic_1.png'
  import pic_2 from '../assets/image/page_3/pic_2.png'
  import pic_3 from '../assets/image/page_3/pic_3.png'
  import pic_4 from '../assets/image/page_3/pic_4.png'
  import pic_5 from '../assets/image/page_3/pic_5.png'
  import pic_6 from '../assets/image/page_3/pic_6.png'
  import pic_7 from '../assets/image/page_3/pic_7.png'
  import pic_8 from '../assets/image/page_3/pic_8.png'
  import pic_9 from '../assets/image/page_3/pic_9.png'
  import pic_10 from '../assets/image/page_3/pic_10.png'

</script>

<style lang="less">
@import "../assets/css/animation.less";

.page-3-container {
  position: relative;
  width: 100%;
  height: 100%;

  .square-bg {
    width: 140vw;
    height: 140vw;
  }

  .top-right--wrap {
    position: absolute;
    top: -42vw;
    right: -92vw;
    transform: rotate(7deg);
    z-index: 99;
    animation: anRight_112 1.5s ease
  }

  .top-left--wrap {
    position: absolute;
    width: 63vw;
    height: 16vw;
    top: 9vw;
    left: 6vw;
    animation: titleEnter 1.5s ease;
    .name-pic {
      display: block;
      width: 29vw;
      height: 6vw;
      margin-bottom: 3vw;
    }
    .en-name-pic {
      display: block;
      width: 30vw;
      height: 4vw;
      margin-bottom: 3vw;
    }
    .line-pic {
      display: block;
      width: 100%;
      height: 1vw;
    }
  }
  .bottom-right--wrap {
    position: absolute;
    width: 10vw;
    height: 10vw;
    bottom: 12vw;
    right: 68vw;
    transform: rotate(-12deg);
    animation: anIncline_12 1.5s ease;
  }
  .letf--wrap {
    position: absolute;
    left: -106vw;
    top: 55vw;
    z-index: 99;
    animation: anLeft_106 1.5s ease;
  }

  .content {
    position: absolute;
    width: 100vw;
    height: 11vw;
    bottom: 21vw;
    text-align: center;
    animation: hideShow 1.5s ease;
    img {
      width: 48vw;
      height: 100%;
    }
  }

  .heart-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -45vw 0 0 -40vw;
    animation: anZoom .8s ease;
    .first-floor {
      display: flex;
      justify-content: space-between;
      width: 58vw;
      margin: 0 auto;
      img {
        width: 22vw;
        height: 19vw;
      }
    }
    .second-floor {
      display: flex;
      justify-content: space-between;
      width: 80vw;
      margin-top: 4vw;
      img {
        width: 19vw;
        height: 20vw;
      }
      .offset {
        margin-top: 11px;
      }
    }
    .third-floor {
      display: flex;
      justify-content: space-between;
      width: 67vw;
      margin: 0 auto;
      margin-top: 4vw;
      img {
        width: 20vw;
        height: 19vw;
      }
    }
    .last-floor {
      display: flex;
      justify-content: center;
      margin-top: 4vw;
      img {
        width: 22vw;
        height: 19vw;
      }
    }
  }
}
</style>
